
import { ref, onMounted, reactive, watch, unref } from "vue";
import { getBooksApi } from "@/api/crud"
import { getGoodsListApi } from "@/api/goods"

// hooks作用：封装组件的业务逻辑
export function useData() {
    const count = ref(3);

    function addCount() {
        count.value++;
    }

    onMounted(() => {
        console.log("onMounted");
        count.value *= 2;
    })

    return {
        count, addCount
    }
}


export const useBooks = () => {

    const books = reactive([]);

    getBooksApi().then(res => {
        books.length = 0;
        books.push(...res.data)
    })

    return books;

}

export const useGoodsList = (count, limitNum) => {

    const goodsList = reactive([]);
    

    function getGoodsList() {
        console.log("watch，count", count);
        getGoodsListApi({
            count: unref(count),
            limitNum
        })
            .then(res => {
                if (res.data.code === "200") {
                    goodsList.length = 0;
                    goodsList.push(...res.data.data)
                }
            })
    }

    watch(count, getGoodsList);

    getGoodsList();

    return  { goodsList }

    // return ttt;
    // return {
    //     ttt
    // }
}

export const useTest=()=>{
    // const person = reactive({
    //     id:"01001",
    //     name:"张三",
    // })

    // return person;

        const person = ref({
        id:"01001",
        name:"张三",
    })

    return {
        person
    }
}